<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Demo19</title>
  <script src="js/vue.js"></script>
</head>
<body>
<div id="app"></div>
</body>
<script>
  const app=Vue.createApp({
    data(){
      return{
        count:0
      }
    },
    methods:{
      addCountClick(){
        this.count++
      },
      handleBtnClick1(){
        alert(1)
      },
      showsubmit(){
        alert("submit");
      },
    },
    template:`
<!--   一次点击两个事件，发生了冒泡的情况，终止可以使用stop 关键字   -->
        <div @click.self="handleBtnClick1">
          外层div的文字
            <div>目前已点佳丽数量{{count}}.</div>
            <button @click=" addCountClick()">增加一位佳丽</button>
<!--          once修饰符：事件只执行一次-->
        <button @click.once="addCountClick">只能增加一次</button>
        </div>
<!--  prevent 用于阻止默认事件的发生，capture修饰符：改成捕获模式，默认的模式都是冒泡模式，也就是从下到上，但是你用capture后，是从上到下的。 -->
      <form action="hw.html" @submit.prevent="showsubmit"><input type="submit"></form>
        `
  })
  const vm=app.mount("#app")

</script>

</html>
